<template>
  <div>
    <el-card style="margin: 20px">
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
        :model="form"
      >
        <el-form-item label="标签名称">
          <el-input placeholder="请输入" v-model="form.tags"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            placeholder="请选择"
            v-model="form.province"
            @change="handelChange"
          >
            <el-option
              v-for="item in province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <el-select placeholder="请选择" v-model="form.city">
            <el-option
              v-for="item in city"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请选择" v-model="form.state">
            <el-option
              v-for="item in state"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 25px">
          <el-button size="mini" @click="handelClear">清除</el-button>
          <el-button type="primary" size="mini" @click="handelSearch"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            style="margin-left: 646px"
            @click="handelAdd('新增')"
            >新增用户</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert :title="`共${counts}条记录`" type="info" show-icon> </el-alert>
      <el-table style="width: 100%" :data="data">
        <el-table-column label="序号" width="140px" prop="id" align="center">
        </el-table-column>
        <el-table-column label="企业编号" prop="number" align="center">
        </el-table-column>
        <el-table-column label="企业简称" prop="shortName" align="center">
        </el-table-column>
        <el-table-column label="标签" prop="tags" align="center">
        </el-table-column>
        <el-table-column label="创建者" prop="creatorID" align="center">
        </el-table-column>
        <el-table-column label="创建日期" prop="addDate" align="center">
        </el-table-column>
        <el-table-column label="备注" prop="remarks" align="center">
        </el-table-column>
        <el-table-column label="状态" prop="state" align="center">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.state === 1">启用</span>
            <span v-if="scope.row.state === 0">未启用</span> -->
            {{ scope.row.state === 1 ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="handelEdit(scope.row)"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.state === 1 ? '禁用' : '启用' "
              placement="top"
            >
              <el-button
              @click="handelMiddle(scope.row)"
                :type="scope.row.state === 1 ? 'warning' : 'success'"
                :icon="scope.row.state === 1 ? 'el-icon-close' :'el-icon-check'"
                circle
                plain
              ></el-button>
            </el-tooltip>

            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PaginAtion @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :pagesize ="params.pagesize" :counts="counts"></PaginAtion>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      ref="roleRef"
    >
      <el-form
        ref="roleRef"
        label-width="150px"
        style="padding-right: 110px"
        :rules="rules"
        :model="addList"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addList.shortName" />
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addList.company" />
          <span>http://www.tianyancha.com(在此可查询所属公司全称及简称)</span>
        </el-form-item>
        <el-form-item label="城市地区" prop="province">
          <el-select
            placeholder="请选择"
            v-model="addList.province"
            @change="handelChange2"
          >
            <el-option
              v-for="item in province"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
          <el-select
            collapse-tags
            style="margin-left: 20px"
            placeholder="请选择"
            v-model="addList.city"
          >
            <el-option
              v-for="item in city"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="addList.tags" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            placeholder="请输入"
            v-model="addList.remarks"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; text-align: center"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelDialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CompanyList, add, update, remove, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import { status } from './constants'
import PaginAtion from '@/components/PaginAtion/index'
export default {
  components: {
    PaginAtion
  },
  data () {
    return {
      counts: 0,
      params: {
        page: 1,
        pagesize: 10
      },
      data: [],
      dialogVisible: false,
      form: {
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      },
      province: [],
      city: [],
      state: [],
      title: '',
      addList: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        company: '',
        remarks: '',
        isFamous: true
      },
      rules: {
        tags: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        province: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
        city: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        shortName: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
        company: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        remarks: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.list()
    this.province = provinces()
    this.state = status
  },
  methods: {
    // 列表
    async list () {
      const res = await CompanyList(this.params)
      console.log(res)
      this.data = res.data.items
      this.counts = res.data.counts
      this.form.page = res.data.page
      this.form.pagesize = res.data.pagesize
      this.counts = res.data.counts
    },
    handleSizeChange (val) {
      this.params.pagesize = val
      this.list()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(val)
      this.params.page = val
      this.list()
      console.log(`当前页: ${val}`)
    },
    // 清除
    handelClear () {
      this.form = ''
    },
    handelChange () {
      this.city = citys(this.form.province)
    },
    handelChange2 () {
      this.city = citys(this.addList.province)
    },
    // 搜索
    async handelSearch () {
      const res = await CompanyList(this.form)
      console.log(res)
      this.data = res.data.items
    },
    // 新建
    handelAdd (value) {
      this.title = '创建用户'
      this.addList = { ...value }
      this.city = citys(this.form.province)
      console.log(this.addList)
      this.dialogVisible = true
    },
    // 点击确认新增
    async handelDialogVisible () {
      if (this.title === '创建用户') {
        this.$refs.roleRef.validate()
        this.addList.isFamous = true
        const res = await add(this.addList)
        console.log(res)
        this.dialogVisible = false
        this.list()
        // 清空
        this.addList = ''
      } else {
        this.$refs.roleRef.validate()
        this.addList.isFamous = true
        await update(this.addList)
        this.list()
        // 清空
        this.addList = ''
        this.dialogVisible = false
      }
    },
    async handelEdit (row) {
      this.dialogVisible = true
      this.title = '编辑用户'
      this.addList = { ...row }
    },
    // 删除
    async del (row) {
      await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove(row)
      console.log(res)
      this.$message({
        type: 'success',
        message: '成功删除用户!'
      })
      this.list()
    },
    // 启用
    async handelMiddle (row) {
      await this.$confirm(`已成功${row.state === 1 ? '启用' : '禁用'}，是否继续？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const data = await disabled({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      console.log(data)
      row.state = row.state === 1 ? 0 : 1
      this.$message.success(`已成功${row.state === 1 ? '禁用' : '启用'}`)
    }
  }
}
</script>

<style scoped lang="scss"></style>
